Step 1 - Render the car and headlights

In this step of the tutorial you create the render passes you need to render the car and the headlights separately.

Assets for the tutorial

The starting point of this tutorial is the Bloom.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Bloom/Start directory.

The assets you use in this tutorial are stored in the <KanziWorkspace>/Tutorials/Bloom/Assets directory.

The <KanziWorkspace>/Tutorials/Bloom/Completed directory contains the completed Kanzi Studio project of this tutorial.

Render the scene

In this section you create the render passes to render the entire scene.

To render the scene:

  1. In Kanzi Studio open the project stored in the <KanziWorkspace>/Tutorials/Bloom/Start directory.
  2. In the Library > Rendering press Alt and right-click Render Passes, select Group Render Pass, and name it Bloom.
    Group Render Pass allows you to collect render passes so that you can refer to a single render pass in your Scene or Viewport 2D node.
    You use this render pass to gather several render passes you create in this procedure which, when combined, render the car and apply the bloom effect to the headlights.
  3. In the Library > Rendering > Render Passes > Bloom create a Composition Target Render Pass and name it Render Scene.
    Composition Target Render Pass renders itself and its child render passes to a composition target.
    You use this render pass to render the Scene node car to a composition target, which you later use as input for the render pass to pick only the headlights.
  4. In the Library > Rendering > Render Passes > Bloom > Render Scene create a Default Render Pass.
    Default Render Pass creates a basic set of render passes that first render opaque nodes and then transparent nodes.
    You use this render pass to render the content of the Scene node car normally.
  5. In the Project select the RootPage > Car > car node and in the Properties set the Render Pass property to Bloom.
    Kanzi Studio renders the Scene node car using the Bloom render pass. The Bloom render pass renders the car node to a composition target, which is why the Preview does not show any content.
  6. In the Library > Rendering > Render Passes > Bloom create a Blit Render Pass, name it Show Scene, and in the Properties set the Texture0 property to Render Scene.
    Blit Render Pass blits one or more render passes or textures on the screen using a specific material.
    You use this render pass to draw on the screen the Render Scene render pass which renders the content of the Scene node car.

  7. In the Library > Rendering > Render Passes > Bloom > Render Scene > Default Render Pass select the Clear Render Pass, in the Properties add the Clear Color property, and set:This way you clear the color buffer with transparent black color.

Render the headlights

In this section you create the render passes and material you need to render only the car headlights to which you later apply the bloom effect.

To render the headlights:

  1. In the Library > Rendering > Render Passes > Bloom create a Group Render Pass and name it Render Bloom.
  2. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the BloomThreshold.kzmat material type.
    Kanzi Studio adds the BloomThreshold material type and creates the BloomThresholdMaterial material which supports rendering only the regions which are brighter than a specific threshold value.
    The fragment shader of the BloomThreshold material type:
  3. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Bloom Threshold, and in the Properties add and set:You use this render pass to draw to the screen only those regions of the car node that are brighter than the value of the Threshold property. Later you apply a Gaussian blur to these regions to create the bloom effect.

  4. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Composition Target Render Pass, name it Bloom Threshold, and drag the Blit Bloom Threshold render pass to the Bloom Threshold render pass.
    You use the Bloom Threshold render pass to render the Blit Bloom Threshold render pass to a composition target which you later use as input to the render passes that apply the bloom effect. Because Kanzi renders the Blit Bloom Threshold render pass to a composition target, the Preview does not show it.

< INTRODUCTION
NEXT STEP >

See also

To learn more about the render passes in Kanzi, see Rendering.

To learn more about materials and material types, see Material types and materials.

Open topic with navigation